import React from 'react';
import { Icon, Tools } from 'weaver-mobile';
import { toJS } from 'mobx';
import { observer, inject } from 'mobx-react'; 
import $ from 'jquery';
const getLabel = Tools.getLabel;

@inject('wfCommunicateStore')
@observer
class QuoteHead extends React.Component {

    //获取签字意见的文本内容
    getSignText = (str) => {
      const {  signReplyInfo: {reply_info}, store} = this.props;
      const { setReplyMark, setSignReplyParam } = store;
      setSignReplyParam(toJS(reply_info));
      let remarkStr =  '<div class="wrap_box">'+ str +'</div>';
      let remarkElement = $(remarkStr);
      remarkElement.children().filter(".container_form_wrap") 
        && remarkElement.children().filter(".container_form_wrap").remove();
      remarkElement.children().filter("span:not(#wea_rich_text_default_font)") 
        && remarkElement.children().filter('span:not(#wea_rich_text_default_font)').remove();
      let newStr = remarkElement.html(); //还原成字符串
      newStr = this.imgWrapDiv(newStr);
      setReplyMark(newStr);
      let pic = `[${getLabel(528760 , '图片')}]`;
      str = newStr.replace(/<img.*?>/g, pic);
      str = str.replace(/<[^>]*>|<\/[^>]*>/gm, "")
      str = str.replace(/\r|\n|\\s/gm, "");
      str = `<div class='remark-quote'>${str}</div>`;
      return str;
    }   

    //给来自移动端的图片外层包裹<div>，解决PC端显示正常的问题。
    imgWrapDiv(srcHtml__) {
      if (srcHtml__.indexOf("img") > -1 || srcHtml__.indexOf("IMG") > -1) {
          var firstnum = srcHtml__.indexOf("<img");
          if (firstnum == -1) {
              firstnum = srcHtml__.indexOf("<img");
          }
          var begin_srcHtml = srcHtml__.substring(0, firstnum);
          var end_srcHtml = "";
          var cycleString = srcHtml__.substring(firstnum);
          while (cycleString.indexOf("<img") > -1 || cycleString.indexOf("<IMG") > -1) {
            var b = cycleString.indexOf("<img");
            if (b == -1) {
                b = cycleString.indexOf("<IMG");
            }
            begin_srcHtml += cycleString.substring(0, b);
            cycleString = cycleString.substring(b);
            var imgString = "";
            var n = cycleString.indexOf(">");
            imgString = cycleString.substring(0, n);
            begin_srcHtml += "<div> " + imgString + "/> </div>";
            cycleString = cycleString.substring(n + 1);
            end_srcHtml = cycleString;
          }
          begin_srcHtml += end_srcHtml; 
          srcHtml__ = begin_srcHtml;
      }
      return srcHtml__;  
    }

    //签字意见面板取消
    hiddenSignPanel = () => {
    const { clearReplyInfo, store, setDetailReplyVisible} = this.props;
    const { comSetStoreState, replyType, setQuoteCancel} = store;
    clearReplyInfo();
    if(replyType === 'quote') {
      comSetStoreState({
        placeholderValue: getLabel('512567', '交流内容...'), 
        needPanel: false,
        quoteCancelFlag: true
      });
    } else {
      comSetStoreState({
        placeholderValue: getLabel('512567', '交流内容...'), 
        signRelyFlag: false, 
        needPanel: false,
        replyType: ''
      });
    }
    
    setDetailReplyVisible(false);
    this.signReplyPanel.style.display = 'none';
  }

  getContent = () => {
    let dom = null;
    const {  signReplyInfo: {reply_status, reply_info}, quoteInfo  } = this.props;
    let replyType = reply_status ? 'reply' : 'quote';
    switch( replyType){
      case('reply'): {
        dom = (
          <div 
            className={'sign-reply-panel'} 
            ref = {ref => this.signReplyPanel = ref}
          >
            <div className={'needWrap'} >
              <div className={'quote-top-words'}>
                <div className={'top-panel'}>
                  <div className={'content-top-quote'}> 
                    <span className={'wfComu-reply-user'}>
                      <span className='quote-span'>{getLabel('385534', "回复")}</span> 
                      <a href={`javaScript:openhrm(${reply_info.log_agentorbyagentid});`} onClick={window.pointerXY}>{reply_info.displayname}</a>
                      <span className={'reply-span reply-department'}>{reply_info.displaydepname}</span>
                      <span className={'reply-span reply-date'}>{reply_info.log_operatedate}</span>
                      <span className={'reply-span reply-time'}>{reply_info.log_operatetime}</span>
                      <span className={'reply-span right-words'}>{'[' + reply_info.log_nodename + '/' + reply_info.operationname + ']'}</span>
                    </span>
                    <Icon type={'cross'} size={'xs'} onClick={this.hiddenSignPanel}/>
                </div>
                <div className={'reply-content'}>
                  <div className={'wea-cl-content'}  dangerouslySetInnerHTML={{ __html: this.getSignText(reply_info.log_remarkHtml) }} />
                </div>
              </div>    
            </div>
          </div>       
        </div>
        );   
      } break;
      case('quote'): dom = (
        <div 
          className={'sign-reply-panel'} 
          ref = {ref => this.signReplyPanel = ref}
        >
          <div className={'needWrap'} >
            <div className={'quote-top-words'}>
              <div className={'top-panel'}>
                <div className={'content-top-quote'}> 
                  <span className={'wfComu-reply-user'}>
                    <span className='quote-active'>{getLabel('19422', "引用")}</span>
                    <span className='quote'>{'#'+ quoteInfo.floorNum}</span>
                    <a 
                      className='reply-span' 
                      href={`javaScript:openhrm(${quoteInfo.creater.id});`} 
                      onClick={window.pointerXY}
                    >
                      {quoteInfo.createUserName}
                    </a>
                    {/* <span className={'reply-span'}>{quoteInfo.creater.departmentName}</span> */}
                    <span className={'reply-span reply-date'}>{quoteInfo.replyDate}</span>
                    <span className={'reply-span reply-time'}>{quoteInfo.replyTime}</span>
                  </span>
                  <Icon type={'cross'} size={'xs'} onClick={this.hiddenSignPanel}/>
              </div>
              <div className={'reply-content'}>
                <div 
                  className={'wea-cl-content'}  
                  dangerouslySetInnerHTML={{ __html: this.getSignText(quoteInfo.showRemark)}}
                />
              </div>
            </div>    
          </div>
        </div> 
      </div>
      ); break;
    }
    return dom;
  }
  render() {
    return (
      <React.Fragment>
        {this.getContent()}
      </React.Fragment>
    )
  }
}
export default QuoteHead;